<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务支出表</title>
    <link href="https://cdn.bootcss.com/element-ui/2.2.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="finance_table">
    <el-table
            :data="tableData"
            :summary-method="getSummaries"
            show-summary
            style="width: 100%">
        <el-table-column
                prop="feeid"
                label="费用编号"
                width="300"
        >
        </el-table-column>
        <el-table-column
                prop="item"
                label="支出项"
                sortable
                width="200"
        >
        </el-table-column>
        <el-table-column
                prop="orderid"
                label="相关订单编号"
                width="300"
        >
        </el-table-column>
        <el-table-column
                prop="time"
                label="支出时间"
                width="200"
        >
        </el-table-column>
        <el-table-column
                prop="rate"
                label="支出费用"
                sortable
                width="150">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="备注"
                width="100"
        >
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row, tableData)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<div id="echarts-3" style="width: 600px;height: 400px;"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.2.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
<script>
    new Vue({
        el: '#finance_table',
        data(){
            return {
                tableData: []
            }
        },
        methods: {
            handleEdit(index, row) {

            },
            handleDelete(index, row, rows) {

                axios.get('/finance/deleteFeeById',{
                    params: {
                        'id': row.feeid
                    }
                })
                    .then(function (response) {
                        if (response.data.trim()=='TRUE')
                            rows.splice(index,1);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总收入';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[1] = 'N/A';
                        sums[2] = 'N/A';
                        sums[4] = 'N/A';
                        sums[3] += '';
                    } else {
                    }
                });

                return sums;
            }
        },
        created: function () {
            var data=  []
            Vue.prototype.$http = axios;
            let _this = this
            this.$http.get('/backsys/getallfees',{
            })
                .then(function (response) {
                    for (let i = 0; i < response.data.length; i++) {
                        var obj = {};
                        obj.feeid = response.data[i].id
                        obj.item = response.data[i].item
                        obj.orderid = response.data[i].orderId
                        obj.time = response.data[i].createTime.substring(0,10)
                        obj.rate = response.data[i].rate
                        obj.remark = response.data[i].remark
                        data[i] = obj
                    }
                    _this.tableData = data
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    });
</script>
</html>